<template>
	<uni-nav-bar :title="title" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package" v-if="friendAll">
		<view class="space-between">
			<view>头像</view>
			<image :src="friendAll.avatar" mode=""></image>
		</view>
		<view class="space-between top">
			<view>微信昵称</view>
			<view>{{friendAll.nickname}}</view>
		</view>
		<view class="space-between top">
			<view>手机号</view>
			<view @click="telCall(friendAll.mobile)">{{friendAll.mobile}}</view>
		</view>
		<view class="space-between top">
			<view>邀请人</view>
			<view v-if="friendAll.zhitui_name">{{friendAll.zhitui_name}}({{friendAll.zhitui_id}})</view>
		</view>
		<view class="space-between top">
			<view>注册时间</view>
			<view>{{friendAll.createtime}}</view>
		</view>
	</view>
	<view class="package" v-if="friendAll">
		<view class="space-between">
			<view>姓名</view>
			<view>{{friendAll.name}}（{{friendAll.id}}）</view>
		</view>
		<view class="space-between top">
			<view>余额</view>
			<view>{{friendAll.money}}</view>
		</view>
		<view class="space-between top">
			<view>代金卡</view>
			<view>{{friendAll.gift}}</view>
		</view>
		<view class="space-between top">
			<view>赠品卡</view>
			<view>{{friendAll.zeng}}</view>
		</view>
		<view class="space-between top">
			<view>累计</view>
			<view>{{friendAll.progit_count}}</view>
		</view>
		<view class="space-between top">
			<view>可提现</view>
			<view>{{friendAll.progit_withdrawal}}</view>
		</view>
		<view class="space-between top">
			<view>待释放</view>
			<view>{{friendAll.progit_freeze}}</view>
		</view>
		<view class="space-between top">
			<view>积分</view>
			<view>{{friendAll.score}}</view>
		</view>
	</view>
	<view class="package space-between" v-if="friendAll">
		<view>车牌号</view>
		<view @click="isShowPlateKeyboard=true">{{friendAll.cart_code }}<uni-icons type="right" size="20"></uni-icons>
		</view>
	</view>
	<view class="package" v-if="RoleList.length>0">
		<view class="space-between" v-for="(item,index) in RoleList" :key="index">
			<view>{{item.type_text}}</view>
			<view>{{item.name}}</view>
		</view>
	</view>
	<view class="package">
		<view class="space-between">
			<view>加注机</view>
			<hpy-form-select :dataList="keyList" text="name" name="value" @change="consolu" :Text="keyName"
				state="admin" :icon='true' />
		</view>
		<view class="space-between top" v-if="fillName">
			<view>加注页面</view>
			<view>{{fillName}}</view>
		</view>
	</view>
	<view class="package space-between ability" style="background: transparent;padding: 0px;">
		<view v-for="item in list" :key="item" @click="navTo(item.push+'?id='+friendID+'&name='+friendAll.nickname)">
			{{item.name}}
		</view>
	</view>
	<!-- 汽车车牌 -->
	<VehiclePlatePad v-if="isShowPlateKeyboard" @cancel="isShowPlateKeyboard = false" @confirm="addPlate" />
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import VehiclePlatePad from '@c/earthPushing/common/VehiclePlatePads.vue';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { telCall } from '@/utils/copyText';
	import { toPublish } from '@mqtt';
	import { getDriverInfo, getDriverRoleList, getFillList, getRolePage } from '@/gql/administrator';
	import { errorToast, showLoading, successToast } from '@/utils/prompt';
	/**
	 * 车友详情
	 * @property {String} title 标题
	 * @property {String} friendID 车友ID
	 * @property {Object} friendAll 车友详情的全部信息
	 * @property {Array} RoleList 身份列表
	 * @property {Array} keyList 加注机列表
	 * @property {String} keyName 加注机名称
	 * @property {String} fillName 加注页面
	 * @property {Number} keyId 加注机ID
	 */
	const title = ref('')
	const friendID = ref()
	const friendAll = ref()
	const RoleList = ref([])//身份列表
	const keyName = ref('请选择加注机'); //加注机名称
	const keyId = ref();//加注机ID
	const keyList = ref([]); // 加注机列表
	const fillName = ref('') //加注页面
	const isShowPlateKeyboard = ref(false); //车牌弹框
	const list = [
		{ name: '我的下线', push: 'administrator/carFriend/subordinate' },
		{ name: '奖励记录', push: 'administrator/carFriend/reward' },
		{ name: '变动明细', push: 'administrator/carFriend/alteration' },
		{ name: '提现记录', push: 'administrator/carFriend/withdrawal' },
		{ name: '实物账户', push: 'administrator/carFriend/account' }]
	onLoad((pearm) => {
		friendID.value = pearm.id
		init()
		getDrive()
	})
	/**
	 * 获取车友详情
	 */
	function init() {
		showLoading()
		const payload = {
			query: getDriverInfo,
			variables: {
				driver_id: Number(friendID.value)
			},
		};
		toPublish(
			'ql/control/getDriverInfo',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getDriverInfo } = obj.data;
				friendAll.value = getDriverInfo
				title.value = getDriverInfo.nickname + '详情'
			}
		);
	}
	//身份列表
	function getDrive() {
		showLoading()
		const payload = {
			query: getDriverRoleList,
			variables: {
				driver_id: Number(friendID.value)
			},
		};
		toPublish(
			'ql/control/getDriverRoleList',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getDriverRoleList } = obj.data;
				RoleList.value = getDriverRoleList
			}
		);
	}
	//加注机列表
	FillAll()
	function FillAll() {
		showLoading('正在加载');
		const payload = {
			query: getFillList
		};
		toPublish('ql/control/getFillList', payload, (obj : any) => {
			uni.hideLoading();
			const { data } = obj;
			keyList.value = data.getFillList;
		});
	}
	/**
	 * 切换加注机ID
	 * @param {String} e.data.name  加注机名称
	 * @param {Number} e.data.id  加注机ID
	 * @param {String} e.data.amount  加注机存量
	 */
	function consolu(e : any) {
		keyName.value = e.data.name;
		keyId.value = e.data.id;
		showLoading()
		const payload = {
			query: getRolePage,
			variables: {
				driver_id: Number(friendID.value),
				fill_id: Number(keyId.value)
			},
		};
		toPublish(
			'ql/control/getRolePage',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getRolePage } = obj.data;
				fillName.value = getRolePage.page
			}
		);
	}
	/**
	 * 确认添加车牌
	 */
	function addPlate(plateNum : string) {
		isShowPlateKeyboard.value = false;
		showLoading()
		const payload = {
			driver_id: Number(friendID.value),
			cart_code: plateNum,
		};
		toPublish(
			'control/editCartCode',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					init()
					successToast(msg)
				} else {
					errorToast(msg)
				}
			}
		);
	}
</script>

<style scoped lang="less">
	.space-between {
		image {
			width: 62rpx;
			height: 62rpx;
			background: #DADADA;
			border-radius: 5px;
		}
	}

	.ability {
		flex-wrap: wrap;

		view {
			width: 48.5%;
			height: 102rpx;
			background: #FFFFFF;
			border: 1px solid #EEF3F7;
			border-radius: 6px;
			text-align: center;
			line-height: 102rpx;
			margin-bottom: 15rpx;
		}
	}

	.top {
		margin-top: 15rpx;
	}
</style>
<style>
	.space-between>>>.select-picker {
		justify-content: flex-end;
		text-align: right;
	}
</style>